//运营管理 - 客服转化率

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Form, DatePicker, Select, Row, Col, Table } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

const columns = [
  {
		title: '用户姓名',
		align: 'center',
		dataIndex: 'userName',
    width: 100
  }, 
  {
		title: '组别',
		align: 'center',
		dataIndex: 'group',
		width: 115
  }, 
  {
		title: '统计时间',
		align: 'center',
		dataIndex: 'statisticsTime',
		width: 100
  },
  {
    title: '抢单数量',
    align: 'center',
    dataIndex: 'grabCount',
    width: 100
  },
  {
    title: '分配数量',
    align: 'center',
    dataIndex: 'distributionCount',
    width: 100
  },
  {
    title: '审核数量',
    align: 'center',
    dataIndex: 'reviewCount',
    width: 100
  },
  {
    title: '通过数量',
    align: 'center',
    dataIndex: 'passedCount',
    width: 100
  },
  {
    title: '流单率',
    align: 'center',
    dataIndex: 'flowRate',
    width: 100
  },
  {
    title: '通过转化率',
    align: 'center',
    dataIndex: 'passRate',
    width: 100
  },
  {
    title: '实时回款率',
    align: 'center',
    dataIndex: 'refundRate',
    width: 100
  }
];

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
		key: i,
    userName: '付芊芊',
    group: '审核部门1',
    statisticsTime: '2018-12-08',
    grabCount: 1,
    distributionCount: 0,
    reviewCount: 1,
    passedCount: 1,
    flowRate: 0,
    passRate: 0,
    refundRate: 0
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class CustomerService extends Component {

  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">客服转化率</span>
              <div className="btn">
                <Button icon="redo" size="small">刷新</Button>
                <Button icon="delete" size="small" onClick={this.handleDelete}>清空</Button>
                <Button icon="search" size="small" type="primary" onClick={this.handleSearch}>搜索</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={6}>
                    <FormItem>
                      {getFieldDecorator('group', {
                        rules: [{ required: true, message: 'Please input your group!' }],
                      })(
                        <Select placeholder="组别" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }}>
                          <Select.Option value="group1">审核部门1</Select.Option>
                          <Select.Option value="group2">审核部门2</Select.Option>
                          <Select.Option value="group3">审核部门3</Select.Option>
                        </Select>
                      )}                    
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem>
                      {getFieldDecorator('userName', {
                        rules: [{ required: true, message: 'Please input your userName!' }],
                      })(
                        <Select placeholder="用户姓名" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }}>
                          <Select.Option value="group1bee">审核部门1小蜜蜂</Select.Option>
                          <Select.Option value="group2bee">审核部门2小蜜蜂</Select.Option>
                          <Select.Option value="group3bee">审核部门3小蜜蜂</Select.Option>
                        </Select>
                      )}                    
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem>
                      {getFieldDecorator('range-picker', rangeConfig)(
                        <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '400px' }} />
                      )}
                    </FormItem>
                  </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered columns={columns} dataSource={data} />
          </div>
        </div> 
      </LocaleProvider>  
		);
	}
}

const serviceForm = Form.create()(CustomerService);

export default serviceForm;